<template>
  <div class="params-config">
    <!-- <el-input type="textarea" autosize :value="JSON.stringify(value, null, 4)" /> -->
    <h4 class="params-config__title">参数配置</h4>
    <div class="params-config__body" v-if="value.length">
      <params-item class="item" v-for="(_, index) in value" :key="index" v-model="value[index]"
        @delete="handleDeleteItem(index)" />
    </div>
    <div class="params-config__control">
      <el-button type="info" plain class="icon-ym icon-ym-btn-add" size="mini"
        @click="handleAddParam">添加参数</el-button>
    </div>
  </div>
</template>

<script>
import ParamsItem from './ParamsItem';

export default {
  name: 'ParamsConfig',
  components: { ParamsItem },
  props: {
    value: {
      type: Array,
      default: () => []
    },
  },
  methods: {
    handleAddParam() {
      const item = {
        id: Date.now(),
        field: '',
        fieldValue: '',
        jnpfKey: 'input',
        format: ''
      }
      const params = [...this.value]
      params.push(item);
      this.$emit('input', params);
    },
    handleDeleteItem(index) {
      const params = [...this.value]
      params.splice(index, 1);
      this.$emit('input', params);
    }
  }
}
</script>

<style lang="scss" scoped>
.params-config {
  display: flex;
  flex-direction: column;
  padding: 10px;

  &__title {
    margin-bottom: 10px;
  }

  &__body {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;

    .item:not(:last-child) {
      margin-bottom: 10px;
    }
  }

  &__control {
    margin-top: 10px;
  }
}
</style>
